<template>
  <div class="app-container">
    <com_header />
    <main>
      <!-- 菜单列表 -->
      <div class="nav">
        <router-link
          v-for="(item, index) in menu_list"
          :key="index"
          :to="item.path"
          class="menu-item"
        >
          {{ item.name }}
        </router-link>
        <p @click="handleLogOff">Log Out</p>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script setup>
import com_header from "@/components/com_header/index.vue";
import { nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";
import router from "@/router";

const store = useStore();

// 注销功能
const handleLogOff = () => {
  ElMessageBox.confirm("Are you sure to log out?", {
    confirmButtonText: "sure",
    cancelButtonText: "cancel",
    customClass: "messageBox",
    type: "",
    showClose: false,
  })
    .then(() => {
      store.dispatch("setUserInfo", {}); // 清空个人信息
      localStorage.removeItem("store"); // 删除sessionStorage
      router.push("/");
    })
    .catch(() => {});
};

// 菜单数据
const menu_list = ref([
  {
    name: "My Order",
    path: "/account/order",
  },
  {
    name: "To Pay",
    path: "/account/pay",
  },
  {
    name: "Contact Us",
    path: "/account/contact_us",
  },
  {
    name: "About Us",
    path: "/account/about_us",
  },
  {
    name: "Privacy Policy",
    path: "/account/privacy_policy",
  },
  {
    name: "Refund Policy",
    path: "/account/refund_policy",
  },
]);

// 效果
onMounted(() => {
  const menuDom = document.querySelectorAll(".menu-item");
  menuDom.forEach((item, index, arr) => {
    item.addEventListener("click", () => {
      item.classList.add("active");
      arr.forEach((subItem, i) => {
        if (i !== index) {
          subItem.classList.remove("active");
        }
      });
    });
  });
});

// 效果
watch(
  () => router,
  (n) => {
    if (n) {
      nextTick(() => {
        const menuDom = document.querySelectorAll(".menu-item");
        menu_list.value.forEach((item, index) => {
          if (item.path === n.currentRoute.value.path) {
            menuDom[index].classList.add("active");
          }
        });
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  background: url("@/assets/background.webp") no-repeat;
  background-size: 100% 100%;
  padding-top: 150px;
  min-height: 100vh;
  padding-bottom: 100px;

  main {
    margin: 0 auto;
    width: 1400px;

    .nav {
      display: flex;
      a {
        padding: 26px 20px;
        width: 100%;
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: #b4b7b7;
        cursor: pointer;
        text-align: center;
        &:hover {
          color: #ffa300;
          background: #263044;
        }
      }
      p {
        padding: 20px;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
        color: #b4b7b7;
        cursor: pointer;
        display:flex;
        align-items: center;
        &:hover {
          color: #fff;
        }
      }
      .active {
        color: #fff;
        background: #263044;
      }
    }
    .content {
     min-height: 70vh;
      background: #263044;
    }
  }
}
</style>
